<template>
  <div class="main">
    <div style="position: relative;height: 1vh;"></div>
    <div style="position: relative;height: 5vh;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items: center;">
      <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '1'" :key="index" plain type="primary"
        :icon="item.menuicon" @click="e_function_all(item.menuperms, item.menuRouter)">
        {{ item.menuName }}
      </el-button>
    </div>


    <div style="position: relative;height: 1vh;"></div>
    <div
      style="position: relative;height: 6vh;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);display: flex;align-items: center;margin-left: 1.8%;width: 97%;">
      人员名字 &nbsp;<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchMap.user_nameLike" clearable
        style="width: 10vw;">&nbsp;</el-input>&nbsp;
      <el-button icon="el-icon-search" plain type="primary" @click="SerchMore()">查询</el-button>

    </div>

    <div style="position: relative;height: 1vh;"></div>
    <div style="position: relative;width: 100%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items:flex-star t;height: 70vh;overflow-y: scroll;">


      <el-table ref="eltable" :data="list" row-key="user_id">
        <el-table-column width="100" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <img :src="getUserImageFilePathQiNiuYun(scope.row.user_header)" v-if="scope.row.user_header"
              style="position: relative;border-radius: 100%;height: 6.1vh;width: 6.2vh;background-color: rgb(255, 255, 255);cursor: pointer;">
            <img :src="getStaticFilePathJAVA('noheaderimage.jpeg')" v-else
              style="position: relative;border-radius: 100%;height: 6.1vh;width: 6.2vh;background-color: rgb(255, 255, 255);cursor: pointer;">
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="名字" width="120" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="creat_time" label="创建时间" width="160">
        </el-table-column>
        <el-table-column prop="update_time" label="用户修改时间" width="160">
        </el-table-column>
        <el-table-column label="用户状态" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
            <el-tag v-if="scope.row.status == 1" type="info">禁用</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="80">
          <template v-slot="scope">
            <el-tag v-if="scope.row.user_sex == 0" type="primary">男</el-tag>
            <el-tag v-if="scope.row.user_sex == 1" type="warning">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="army_name" label="所属队伍" width="160">
        </el-table-column>
        <el-table-column label="详细信息" width="100" type="expand">
          <template slot-scope="props">
            <el-descriptions inline border :column="1">
              <el-descriptions-item label="手机号">{{ props.row.user_phone }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ props.row.user_mail }}</el-descriptions-item>
              <el-descriptions-item v-for="(item, index) in props.row.dutyzxList" :key="index"
                :label="'职务' + Number(index + 1)">
                {{ item.duty_name }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="600" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '3'" :key="index" type="text"
              :icon="item.menuicon" @click="e_function_all(item.menuperms, scope.row)">
              {{ item.menuName }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>



    <!--分页-->
    <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10]"
      :page-size="this.searchMap.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>


    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="100px" :rules="rules" ref="pojo" :model="pojo">
        <el-form-item label="用户名字" prop="user_name">
          <el-input v-model="pojo.user_name" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="user_phone">
          <el-input v-model="pojo.user_phone" />
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="pojo.status" placeholder="请选择">
            <el-option label="正常" :value="0">
            </el-option>
            <el-option label="注销" :value="1">
            </el-option>
            <el-option label="审核中" :value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="pojo.user_sex" placeholder="请选择">
            <el-option label="男" :value="0">
            </el-option>
            <el-option label="女" :value="1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="handleSave('pojo')">保存</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </el-form>
    </el-dialog>




  </div>
</template>
  
<script>
import UserAndArmyApi from '@/api/userzarmyxuRequest.js'
import UserApi from '@/api/userzRequest.js'
import getStorage from '@/utils/getStorage'
export default {
  // 组件名称
  name: 'userinfor',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      //存放第一次查询的数据
      list: [],
      //查询人的Map
      searchMap: {
        user_id: null,
        user_nameLike: null,
        pageNum: 1,
        pageSize: 5,
      },
      count: 5,
      rules: {
        user_name: [
          { required: true, message: '请输入士兵名字', trigger: 'change' }
        ],
        user_phone: [
          { required: true, message: '请输入士兵手机号', trigger: 'change' }
        ],
      },
      pojo: {
        user_id: null,
        user_name: null,
        user_password: null,
        user_phone: null,
        user_mail: null,
        status: null,
        user_header: null,
        creat_time: null,
        update_time: null,
        user_sex: null,

      },
      dialogFormVisible: false,
      id: '',
    }
  },
  // 计算属性
  computed: {
    //获取vuex的数据
    buttonMenu() {
      return this.$store.getters['operation/getButtonList'];
    },
  },
  // 侦听器
  watch: {

  },
  // 组件方法
  methods: {
    //动态按钮执行方法
    e_function_all(function_name, function_data) {
      if (function_name === 'addUserOne') {
        this.handleEdit('');
      }
      else if (function_name === 'updateUser') {
        this.handleEdit(function_data.user_id);
      }
      else if (function_name === 'deleteUser') {
        this.handleDelete(function_data.user_id);
      } else if (function_name === 'refushUser') {
        this.handleRefulsh(function_data.user_id);
      } else if (function_name === 'roleUpdate') {
        this.userRoleMang(function_data.user_id);
      } else if (function_name === 'armydutyUpdate') {
        this.armydutyUpdate(function_data);
      }
    },
    //查询
    fetchData() {
      //编写一个方法请求后端的接口，把返回的数据赋值list
      UserApi.selectUserInforArmy(this.searchMap).then(response => {

        //  //把返回的结果赋值模型
        this.list = response.data.data;
        this.count = response.data.total;
      })

    },
    //当分页大小产生变化的时候调用该方法
    sizeData(size) {
      this.searchMap.pageSize = size
      this.fetchData()
    },
    pageData(page) {
      this.searchMap.pageNum = page
      this.fetchData()
    },
    //带有条件的查询
    SerchMore() {
      if (this.searchMap.user_nameLike === '') this.searchMap.user_nameLike = null;
      this.searchMap.pageNum = 1;
      this.searchMap.pageSize = 5;
      this.fetchData();
    },
    //新增和修改使用同一个函数打开弹窗，区别是新增没有id
    handleEdit(id) {
      this.id = id
      //打开弹窗
      this.dialogFormVisible = true
      if (id !== '') {
        //根据id查询数据绑定到模型上面
        UserApi.selectByUser_id(id).then(reponse => {
          this.pojo = reponse.data;
        })
      } else {
        this.pojo = {
          user_id: null,
          user_name: null,
          user_password: null,
          user_phone: null,
          user_mail: null,
          status: 2,
          user_header: null,
          creat_time: null,
          update_time: null,
          user_sex: 0,
        } //清空数据
      }
    },
    //新增和修改保存数据的方法
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id === null || this.id === '') {
            UserApi.insert(this.pojo).then(reponse => {
              //重新加载列表数据
              this.fetchData()
              //关闭弹窗
              this.dialogFormVisible = false
            })
          } else {
            this.pojo
            UserApi.updateByUser_id(this.pojo).then(reponse => {
              //新增或者修改成功
              //重新加载列表数据
              this.fetchData()
              //关闭弹窗
              this.dialogFormVisible = false

            })
          }
        } else {
          this.$message({
            message: '请输入数值',
            type: 'error'
          })
          return false;
        }
      })
    },
    //删除用户
    handleDelete(id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        UserApi.deleteByUser_id(id).then(reponse => {
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //重置用户
    handleRefulsh(id) {
      this.$confirm('您确定要重置用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.pojo = {
          user_id: id,
          user_name: null,
          user_password: 'wmGsEEZJ3XyqbpjrBpYcHQ==',
          user_phone: null,
          user_mail: null,
          status: null,
          user_header: null,
          creat_time: null,
          update_time: null,
          user_sex: null,
        } //清空数据
        UserApi.updateByUser_id(this.pojo).then(reponse => {
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        });
      });
    },
    //用户角色管理
    userRoleMang(id) {
      this.$store.commit("manageuser/insertdisplayUserDemo", 'userrole');
      this.$store.commit("manageuser/insertdisplayUserId", id);
    },
    //用户职务管理
    armydutyUpdate(data) {
      let obj = {
        army_id:data.army_id,
        army_name:data.army_name,
      }
      this.$store.commit("manageuser/insertdisplayUserId", data.user_id);
      this.$store.commit("manageuser/insertdisplayArmy", obj);
      this.$store.commit("manageuser/insertdisplayUserDemo", 'userarmyduty');
  
    }
  },

  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 在实例初始化之后，组件属性计算之前，如data属性等
  */
  beforeCreate() {
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {
    this.fetchData();
  },
  /**
  * 在挂载开始之前被调用：相关的 render 函数首次被调用。
  */
  beforeMount() {

  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted() {
  },
  /**
  * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  */
  beforeUpdate() {
  },
  /**
  * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  */
  updated() {
  },
  /**
  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
  */
  activated() {
  },
  /**
  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
  */
  deactivated() {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy() {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed() {
  }
}
</script> 
  
  
<style scoped ></style>
  